class UploadShop {
  constructor() {
    this.ipt = document.querySelectorAll("input");
    //获取到页面中的所有ipt标签
    // console.log(this.ipt);
    this.textarea = document.querySelector("textarea");
    this.shopList = document.querySelector(".shopList");
    this.addBtn = document.querySelector("#addBtn");
    this.showImg = document.querySelector("#showImg");
    // console.log(this.showImg.src);
    this.refreshShopList(); //执行刷新商品列表方法
    this.addShop(); //执行添加商品方法
    this.delShop(); //删除商品
  }
  //方法，刷新当前用户发布的商品列表
  async refreshShopList() {
    let shopListAPI = "http://jx.xuzhixiang.top/ap/api/productlist.php";
    let uid = localStorage.getItem("uid");
    let params = { uid: uid };
    let { data } = await axios.get(shopListAPI, { params });
    // console.log(data); //获取到商品信息
    let str = ""; //拼接字符串
    let shoplistArr = [...data.data];
    // console.log(shoplistArr);
    shoplistArr.forEach((obj) => {
      //   console.log(obj);
      str += `
        <li class="flex hover-shadow">
            <img
              src="${obj.pimg}"
              alt=""
            />
            <div>
              <p>商品ID：${obj.pid}</p>
              <p class="elli">商品名：${obj.pname}</p>
              <p>价格：${obj.pprice}</p>
              <p class="elli">描述：${obj.pdesc}</p>
            </div>
            <div>
              <button id="delBtn" pid='${obj.pid}'>删除商品</button>
              <a href="modifyshop.html?id=${obj.pid}&pname=${obj.pname}">修改商品</a>
            </div>
        </li>`;
    });
    this.shopList.innerHTML = str;
    this.delShop();
  }
  //方法，添加商品
  addShop() {
    //首先选择图片上传之后，获取图片的路径
    let imgUrl = "";
    this.ipt[3].oninput = () => {
      //使用上传图片API获取,上传图片的绝对地址
      let uploadImgAPI = "http://jx.xuzhixiang.top/upload_file_qn.php";
      let imgObj = this.ipt[3].files[0];
      //   console.log(imgObj);
      let fd = new FormData();
      fd.append("file", imgObj);
      const xhr = new XMLHttpRequest();
      xhr.open("post", uploadImgAPI);
      xhr.send(fd);
      xhr.onload = () => {
        let JSONStr = xhr.responseText;
        let obj = JSON.parse(JSONStr);
        // console.log(obj);
        imgUrl = obj.file_url;
        this.showImg.src = imgUrl;
        console.log(imgUrl);
      };
    };

    //使用上传商品接口，实现商品的上传
    // console.log(document.querySelector("#addBtn"));
    this.addBtn.onclick = () => {
      let addAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
      let uid = localStorage.getItem("uid");
      let params = {
        pimg: imgUrl,
        pname: this.ipt[1].value,
        pprice: this.ipt[2].value,
        pdesc: this.textarea.value,
        uid: uid,
      };
      //   console.log(params);
      axios.get(addAPI, { params }).then((res) => {
        console.log(res.data);
        alert("添加商品成功");
        //插入成功后刷新
        this.refreshShopList();
      });
    };
  }
  //删除商品
  delShop() {
    let delBtn = document.querySelectorAll("#delBtn");
    // console.log(delBtn);
    let delAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
    let uid = localStorage.getItem("uid");
    let token = localStorage.getItem("token");
    delBtn.forEach((item) => {
      item.onclick = () => {
        let pid = item.getAttribute("pid");
        // console.log(pid);
        let params = {
          pid: pid,
          uid: uid,
          token: token,
        };
        axios.get(delAPI, { params }).then((res) => {
          console.log(res.data);
          alert("删除商品成功");
          this.refreshShopList();
        });
      };
    });
  }
}
new UploadShop();
